<template>
	<div class="train">
		<trainHeader name="优惠券"></trainHeader>
		<div class="trainCoupon" v-if="couponList.length">
			<div class="trainCoupon_notUse" @click="notUseCoupon">
				<div>不使用优惠券</div>
				<div class="trainCoupon_choose">
					<img src="http://h5.kpcx179.com/wximages/train/weixuanzhong.png" alt="" v-if="currentCouponId"/>
					<img src="http://h5.kpcx179.com/wximages/train/xuanzhong.png" alt="" v-else/>
				</div>
			</div>
			<div v-for="item,key in couponList" class="trainCoupon_all" :class="{active:!item.disabled}">
				<div class="trainCoupon_box">
					<div class="trainCoupon_left">
						<div>
							<div class="trainCoupon_price">
								<span>￥</span>{{item.couponMoney}}
							</div>
							<div class="trainCoupon_limit">
								{{item.couponLimit}}
							</div>
							<div class="trainCoupon_tip">
								<span v-if="!item.disabled">该优惠券不可用</span>
							</div>
						</div>
					</div>
					<div class="trainCoupon_right" @click="select(item)">
						<div class="trainCoupon_message" :class="{'active':!item.instructions.length}">
							<div class="trainCoupon_name font_spill">{{item.couponName}}</div>
							<div>
								{{item.receiveStartDate}}-{{item.receiveEndDate}}
							</div>
							<div class="trainCoupon_details" @click.stop="changeDetailsShow(key)" v-if="item.instructions.length">
								<span>详细说明</span>
								<img src="http://h5.kpcx179.com/my/img/xia@2x.png" alt="" v-if="item.isDetails" />
								<img src="http://h5.kpcx179.com/my/img/shang@2x.png" alt="" v-else/>
							</div>
						</div>
						<div v-if="item.disabled == 2" class="trainCoupon_choose">
							<img src="http://h5.kpcx179.com/wximages/train/xuanzhong.png" alt="" v-if="item.selected" />
							<img src="http://h5.kpcx179.com/wximages/train/weixuanzhong.png" alt="" v-else/>
						</div>
					</div>
				</div>
				<div class="trainCoupon_instructions" v-if="item.isDetails" >
					<div v-if="item.instructions.length">
						<div v-for="val in item.instructions">
							{{val}}
						</div>
					</div>
					<div v-else>
						暂无使用规则
					</div>
				</div>
			</div>
		</div>
		<div class="trainCoupon_null" v-else>
			<img src="../../../assets/train/noresult.png" alt="" />
		</div>
	</div>
</template>
<style scoped>
	.trainCoupon {
		padding: 30px;
	}
	
	.trainCoupon_notUse {
		width: 100%;
		padding: 0 25px;
		padding-right: 35px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		background: #fff;
		height: 90px;
		border-radius: 16px;
		margin-bottom: 14px;
		font-size: 32px;
		color: #333333;
	}
	
	.trainCoupon_all {
		background-color: #ffffff;
		border-radius: 16px;
		width: 100%;
		margin-bottom: 14px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	
	.trainCoupon_all.active {
		opacity: 0.7;
	}
	
	.trainCoupon_box {
		height: 180px;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainCoupon_left {
		width: 32%;
		height: 100%;
	}
	
	.trainCoupon_left>div {
		width: 100%;
		height: 100%;
		padding: 26px 0px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 36px;
		color: #fff;
	}
	
	.trainCoupon_price {
		font-size: 50px;
		color: #f74413;
	}
	
	.trainCoupon_price>span {
		font-size: 36px;
	}
	
	.trainCoupon_limit {
		font-size: 28px;
		color: #333;
	}
	
	.trainCoupon_tip {
		font-size: 22px;
		color: #f74413;
	}
	
	.trainCoupon_right {
		flex: 1;
		padding: 20px 25px;
		padding-right: 35px;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.trainCoupon_choose>img {
		width: 38px;
		height: 38px;
	}
	
	.trainCoupon_message {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: flex-start;
		height: 100%;
		font-size: 28px;
		color: #8a8a8a;
		flex: 1;
		box-sizing: border-box;
	}
	
	.trainCoupon_message.active {
		justify-content: space-around;
	}
	
	.trainCoupon_name {
		font-size: 34px;
		color: #333;
		width: 100%;
	}
	
	.trainCoupon_details {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainCoupon_details>img {
		width: 20px;
		height: 12px;
		margin-left: 14px;
	}
	
	.trainCoupon_instructions {
		padding: 10px 35px 20px;
		font-size: 22px;
		color: #999999;
		line-height: 30px;
	}
	
	.trainCoupon_instructions.active {
		padding:0;
	}
	
	.trainCoupon_null {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.trainCoupon_null>img {
		width: 352px;
		height: 461px;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	export default {
		name: "trainCoupon",
		data() { //数据
			return {
				currentCouponId: '', //选中的优惠券ID
				couponList: [], //优惠券列表
				price: "", //价格
				startCity: "", //出发城市
				ticketType: "", //票类型
			}
		},
		mounted() {
			this.currentCouponId = this.$route.query.couponId; //选中的优惠券Id
			this.price = this.$route.query.price; //价格
			this.startCity = this.$route.query.startCity; //出发城市
			this.ticketType = Number(this.$route.query.ticketType); //票类型
			this.getCouponList();
		},
		created() {

		},
		methods: {
			getCouponList() {
				this.$loading.show();
				var param = {
					userID: this.$store.state.common.userinfo.userID,
					//					userID:"9e38bb2436574c6685883f3bfa3feb8c",
					type: this.ticketType ? "7" : "3",
					cityId: this.startCity,
					"status": "1",
				};
				this.$http.post(this.$baseUrl.baseurl + "coupon/app/coupon/usableList", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						var list = res.data.Result.myCouponList || [];
						if(list.length) {
							list.forEach((val) => {
								val.isDetails = false; //详情是否展示  //规则处理
								val.instructions = [];
								val.coupon_instructions && (val.instructions = val.coupon_instructions.split(";")); //规则
								val.disabled = 2; //是否可以使用  2可以 1过期 0不可用
								val.couponLimits = val.couponLimit; //存受限金额
								((val.couponLimits != 0) && (val.couponLimits > this.price)) && (val.disabled = 0);
								val.couponLimit = (val.couponLimit == 0) ? '直减券' : ('满' + val.couponLimit + '元可用'); //展示
								var startDate = val.useStartdate || val.receiveStartdate;
								var endDate = val.useEnddate || val.receiveTime;
								if(val.useTimeType) { //时长劵
									val.receiveStartDate = startDate.substring(0, 10).replace(/-/g, '.'); //开始时间
									var endTime = new Date(startDate.replace(/-/g, "/")).getTime() + val.useDay * 24 * 60 * 60 * 1000;
									val.receiveEndDate = new Date(endTime).format("yyyy.MM.dd"); //结束时间
								} else { //日期区间券
									val.receiveStartDate = startDate.substring(0, 10).replace(/-/g, '.'); //开始时间
									val.receiveEndDate = endDate.substring(0, 10).replace(/-/g, '.'); //结束时间
								};
//								(new Date(val.receiveEndDate.replace(/-/g, '/') + " 23:59:59").getTime() - new Date().getTime() < 0) && (val.disabled = 1); //判断是否过期
								(this.currentCouponId) && (val.selected = (val.couponID == this.currentCouponId)); //选中高亮  
							}, this);
							list.sort((a, b) => { //排序
								return Number(b.disabled) - Number(a.disabled);
							});
						};
						this.couponList = list;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			changeDetailsShow(key) { //详情展示隐藏
				this.couponList[key].isDetails = !this.couponList[key].isDetails;
//				console.log(this.couponList[key].instructions.length);
			},
			select(item) {
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore)); //上页面状态
				item.selected ? this.checked(trainStore) : this.change(item, trainStore);
			},
			notUseCoupon(){ //不使用优惠券
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore)); //上页面状态
				this.checked(trainStore);
			},
			checked(trainStore) { //去掉选中
				trainStore.fillOrder.coupon.name = ""; //优惠券信息清空
				trainStore.fillOrder.coupon.id = "";
				trainStore.fillOrder.coupon.price = 0;
				this.currentCouponId = "";//去掉选中的优惠券ID
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.go(-1);
			},
			change(item, trainStore) { //选中优惠券
				if(item.disabled != 2) return;
				trainStore.fillOrder.coupon.name = item.couponName; //优惠券信息
				trainStore.fillOrder.coupon.id = item.couponID;
				trainStore.fillOrder.coupon.price = item.couponMoney;
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.go(-1);
			},
		},
		components: {
			trainHeader
		},
	};
</script>